<template>
  <div id="page-profiles-change-moble">
    <h2>修改密码</h2>

    <Card>
      <div class="mt30 p20">
        <Row>
          <Col span="8" offset="9">
            <Steps :current="step">
              <Step title="验证原手机" icon="ios-telephone"></Step>
              <Step title="验证新手机" icon="iphone"></Step>
            </Steps>
          </Col>
        </Row>

        <Row v-if="step === 0">
          <Col span="8" offset="8">
            <Form
            ref="form1"
            :model="form1.data"
            :rules="ruleValidate1"
            :label-width="100"
            class="club-info-form mt50">
              <FormItem prop="mobile" label="原手机号码">
                {{ this.userInfo.mobile}}
              </FormItem>
              <FormItem prop="mobileCode" label="验证码">
                <Row>
                  <Col span="15">
                    <Input type="text" v-model="form1.data.mobileCode" placeholder="请输入验证码" />
                  </Col>
                  <Col span="6" offset="1">
                    <time-count-btn ref="timeCountBtn1" type="info" @run="getSmsCode1()"></time-count-btn>
                  </Col>
                </Row>
              </FormItem>
              <FormItem>
                <Button
                  type="primary"
                  size="large"
                  long
                  :loading="isSubmiting1"
                  @click="onSubmit1()">
                  确认
                </Button>
              </FormItem>
            </Form>
          </Col>
        </Row>

        <Row v-if="step === 1">
          <Col span="8" offset="8">
            <Form
            ref="form2"
            :model="form2.data"
            :rules="ruleValidate2"
            :label-width="100"
            class="club-info-form mt50">
              <FormItem prop="newmobile" label="新手机号码">
                <Input ref="form2newmobile" type="text" v-model="form2.data.newmobile" placeholder="请输入新手机号码" />
              </FormItem>
              <FormItem prop="mobileNewCode" label="验证码">
                <Row>
                  <Col span="15">
                    <Input type="text" v-model="form2.data.mobileNewCode" placeholder="请输入验证码" />
                  </Col>
                  <Col span="6" offset="1">
                    <time-count-btn ref="timeCountBtn2" type="info" @run="getSmsCode2()"></time-count-btn>
                  </Col>
                </Row>
              </FormItem>
              <FormItem>
                <Button
                  type="primary"
                  size="large"
                  long
                  :loading="isSubmiting2"
                  @click="onSubmit2()">
                  确认
                </Button>
              </FormItem>
            </Form>
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import profilesApi from '@/api/profiles'
  import timeCountBtn from '@/components/time-count-btn'

  export default {
    name: 'page-profiles-change-moble',
    components: {
      timeCountBtn
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    data () {
      return {
        // 当前阶段
        step: 0,
        // 表单1
        isSubmiting1: false,
        form1: {
          data: {}
        },
        ruleValidate1: {
          mobileCode: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
        },
        // 表单2
        isSubmiting2: false,
        form2: {
          data: {}
        },
        ruleValidate2: {
          newmobile: [
            { required: true, message: '请输入新手机号码', trigger: 'blur' }
          ],
          mobileNewCode: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      async getSmsCode1 () {
        const { body } = await profilesApi.sendSms()
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$refs.timeCountBtn1.start()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.$refs.timeCountBtn1.stop()
          }, 500)
        }
      },
      onSubmit1 () {
        this.$refs['form1'].validate((valid) => {
          if (valid) {
            this.isSubmiting1 = true
            this.$refs.timeCountBtn1.stop()
            this.submit1()
          } else {
            return false
          }
        })
        return false
      },
      async submit1 () {
        const { body } = await profilesApi.validSms({ mobileCode: this.form1.data.mobileCode })
        if (!this.$apiHelper.requestSuccessed(body.responseCode)) {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.isSubmiting1 = false
          }, 500)
        } else {
          this.step = 1
          this.$refs.timeCountBtn1.stop()
          this.$nextTick(() => {
            this.$refs.form2newmobile.focus()
          })
        }
      },
      async getSmsCode2 () {
        const { body } = await profilesApi.sendNewSms({ newmobile: this.form2.data.newmobile })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$refs.timeCountBtn2.start()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.$refs.timeCountBtn2.stop()
          }, 500)
        }
      },
      onSubmit2 () {
        this.$refs['form2'].validate((valid) => {
          if (valid) {
            this.isSubmiting2 = true
            this.submit2()
          } else {
            return false
          }
        })
      },
      async submit2 () {
        const { body } = await profilesApi.changeMobile(this.form2.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('修改成功')
          this.$router.push({path: '/profiles/security'})
          this.$store.dispatch('changeMobile', this.form2.data.newmobile)
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.isSubmiting2 = false
          }, 500)
        }
      },
      resetForm () {
        this.$refs['form1'].resetFields()
        this.$refs['form2'].resetFields()
      }
    }
  }
</script>

<style lang="less">
</style>

